<template>
  <div v-if="store.getters['setting/routerView']" class="app-main-container">
    <div v-if="mode === 'horizontal' && defaultActive!='/index' &&  routes.length>0">
    <div style="width: 13.5%;height: 100%;position: absolute; border-right: solid 1px var(--el-menu-border-color);">
      <el-scrollbar height="100vh">
        <el-menu
          :default-active="defaultActive"
          :background-color="menuBgColor"
          :default-openeds="defaultOpened"
          :unique-opened="uniqueOpenedFlag"
          class="el-menu-vertical"
          :class="{ 'is-black': isBlack }"
          :text-color="textColor"
          :active-text-color="activeTextColor"
          router

        >
          <template v-for="item in routes">
            <template v-if="!item.hidden">
              <MenuItems :item="{ ...item, isBlack }" :key="item.path" />
            </template>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
    <router-view class="app-main-height" style="width: 85%;
    position: absolute;
    right: 0;"/>
    </div>
    <router-view class="app-main-height"  v-else/>
    <!-- <footer class="footer-copyright">{{ copyrightStr }} </footer> -->
  </div>
</template>

<script>
  export default {
    name: 'AppMain',
  };
</script>

<script setup>
  import { ref } from 'vue';
  import { useStore } from 'vuex';
  import { setting } from '@/config/setting';
  import MenuItems from '../Menu/MenuItem.vue';
  import { themeConfig } from '@/config/theme';
  import { useRouter } from 'vue-router';
const { defaultOpeneds, uniqueOpened } = setting;
const { themeOptions } = themeConfig;
const whiteColors = ['#fff', '#ffffff', '#FFF', '#FFF', 'rgb(255, 255, 255)'];
const uniqueOpenedFlag = ref(uniqueOpened);
const store = useStore();
const router = useRouter();
const routes = computed(() => {
    return store.getters['routes/api2Routes'];
  });
  const theme = computed(() => {
    return store.getters['setting/theme'];
  });
  const mode = computed(() => {
    return store.getters['setting/mode'];
  });
  const defaultActive = computed(() => {
    const { fullPath } = router.currentRoute.value;
    return fullPath || '/index';
  });
  const menuBgColor = computed(() => {
    return themeOptions[theme.value].menuBgColor;
  });

  const isBlack = computed(() => {
    return whiteColors.indexOf(menuBgColor.value) === -1;
  });

  const textColor = computed(() => {
    return whiteColors.indexOf(menuBgColor.value) !== -1 ? '#333' : '#fff';
  });

  const activeTextColor = computed(() => {
    document.body.style.setProperty('--el-color-primary', themeOptions[theme.value].primary)
    return themeOptions[theme.value].primary
     ;
    // const mcolor = whiteColors.indexOf(menuBgColor.value) !== -1;
    // return mcolor ? theme.value : '#fff';
  });

  const defaultOpened = computed(() => {
    return defaultOpeneds;
  });
</script>

<style lang="scss" scoped>
  .app-main-container {
    height: 100%;
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
    width: $base-width;
    overflow: hidden;
    overflow-y: scroll;
    text-align: left;
    .app-main-height {
      min-height: $app-main-min-height;
    }
    .footer-copyright {
      min-height: $footer-copyright-height;
      line-height: $footer-copyright-height;
      color: $base-color-3;
      text-align: center;
      border-top: 1px dashed $base-border-color;
    }
  }
  :deep(.el-menu){
    border-right: 0 !important;
  }
</style>
